<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品分类管理 - 仓库管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.8.18/dist/css/layui.css">
    <style>
        body {
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 300;
        }
        
        .main-container {
            display: flex;
            height: calc(100vh - 70px);
        }
        
        .sidebar {
            width: 250px;
            background-color: #fff;
            box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        .nav-item {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        
        .nav-item:hover {
            background-color: #f8f9fa;
            color: #667eea;
        }
        
        .nav-item.active {
            background-color: #667eea;
            color: white;
        }
        
        .nav-item i {
            margin-right: 10px;
            font-size: 16px;
        }
        
        .nav-item span {
            font-size: 14px;
        }
        
        .dashboard {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .dashboard h2 {
            color: #333;
            margin-bottom: 30px;
            font-weight: 300;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 6px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-primary {
            background-color: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #5a6fd8;
        }
        
        .category-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .category-table th,
        .category-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e8e8e8;
        }
        
        .category-table th {
            background-color: #fafafa;
            font-weight: 500;
            color: #333;
        }
        
        .category-table tr:hover {
            background-color: #f5f5f5;
        }
        
        .status-active {
            color: #52c41a;
            font-weight: 500;
        }
        
        .status-inactive {
            color: #ff4d4f;
            font-weight: 500;
        }
        
        .action-buttons {
            display: flex;
            gap: 5px;
        }
        
        .action-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
        }
        
        .action-btn.edit {
            background-color: #faad14;
            color: white;
        }
        
        .action-btn.edit:hover {
            background-color: #d48806;
        }
        
        .action-btn.delete {
            background-color: #ff4d4f;
            color: white;
        }
        
        .action-btn.delete:hover {
            background-color: #cf1322;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 8px;
            width: 500px;
            max-width: 90%;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            margin: 0;
            color: #333;
            font-size: 18px;
        }
        
        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close:hover {
            color: #000;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }
        
        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }
        
        .form-textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            resize: vertical;
            min-height: 80px;
        }
        
        .form-actions {
            padding: 20px;
            border-top: 1px solid #e8e8e8;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .loading i {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #999;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <h1><i class="layui-icon layui-icon-tabs"></i> 商品分类管理</h1>
    </div>
    
    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <div class="nav-item" onclick="goToHome()">
                <i class="layui-icon layui-icon-home"></i>
                <span>系统首页</span>
            </div>
            <div class="nav-item" onclick="goToCustomers()">
                <i class="layui-icon layui-icon-user"></i>
                <span>客户管理</span>
            </div>
            <div class="nav-item" onclick="goToProducts()">
                <i class="layui-icon layui-icon-cart"></i>
                <span>商品管理</span>
            </div>
            <div class="nav-item active" onclick="showCategories()">
                <i class="layui-icon layui-icon-tabs"></i>
                <span>分类管理</span>
            </div>
            <div class="nav-item" onclick="goToOrders()">
                <i class="layui-icon layui-icon-form"></i>
                <span>订单管理</span>
            </div>
            <div class="nav-item" onclick="goToStockIn()">
                <i class="layui-icon layui-icon-add-1"></i>
                <span>入库管理</span>
            </div>
            <div class="nav-item" onclick="goToStockOut()">
                <i class="layui-icon layui-icon-delete"></i>
                <span>出库管理</span>
            </div>
            <div class="nav-item" onclick="goToReports()">
                <i class="layui-icon layui-icon-chart"></i>
                <span>统计报表</span>
            </div>
            <div class="nav-item" onclick="goToSettings()">
                <i class="layui-icon layui-icon-set"></i>
                <span>系统设置</span>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="content">
            <div class="dashboard">
                <h2><i class="layui-icon layui-icon-tabs"></i> 商品分类管理</h2>
                
                <!-- 工具栏 -->
                <div class="toolbar">
                    <div>
                        <span style="color: #666; font-size: 14px;">管理商品分类，为商品提供分类支持</span>
                    </div>
                    <button class="btn btn-primary" onclick="showAddCategoryModal()">
                        <i class="layui-icon layui-icon-add-1"></i> 添加分类
                    </button>
                </div>
                
                <!-- 分类列表 -->
                <div id="categoryList">
                    <div class="loading">
                        <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                        <p>加载中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加/编辑分类模态框 -->
    <div id="categoryModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">添加分类</h3>
                <span class="close" onclick="closeCategoryModal()">&times;</span>
            </div>
            <form id="categoryForm">
                <div style="padding: 20px;">
                    <input type="hidden" id="categoryId">
                    <div class="form-group">
                        <label class="form-label">分类名称 *</label>
                        <input type="text" id="categoryName" class="form-input" required placeholder="请输入分类名称">
                    </div>
                    <div class="form-group">
                        <label class="form-label">分类描述</label>
                        <textarea id="description" class="form-textarea" placeholder="请输入分类描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">排序顺序</label>
                        <input type="number" id="sortOrder" class="form-input" min="0" value="0" placeholder="数字越小排序越靠前">
                    </div>
                    <div class="form-group">
                        <label class="form-label">状态</label>
                        <select id="status" class="form-input">
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="closeCategoryModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script>
        let categories = [];
        
        // 页面加载完成后执行
        layui.use(['layer'], function(){
            var layer = layui.layer;
            loadCategories();
        });
        
        // 加载分类列表
        function loadCategories() {
            const categoryList = document.getElementById('categoryList');
            categoryList.innerHTML = '<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i><p>加载中...</p></div>';
            
            fetch('/api/categories')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        categories = data.data;
                        renderCategoryTable();
                    } else {
                        categoryList.innerHTML = '<div class="no-data">加载失败: ' + data.message + '</div>';
                    }
                })
                .catch(error => {
                    console.error('加载分类失败:', error);
                    categoryList.innerHTML = '<div class="no-data">加载失败，请检查网络连接</div>';
                });
        }
        
        // 渲染分类表格
        function renderCategoryTable() {
            const categoryList = document.getElementById('categoryList');
            
            if (categories.length === 0) {
                categoryList.innerHTML = '<div class="no-data">暂无分类数据</div>';
                return;
            }
            
            let tableHTML = `
                <table class="category-table">
                    <thead>
                        <tr>
                            <th>分类名称</th>
                            <th>描述</th>
                            <th>排序</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            categories.forEach(category => {
                const statusClass = category.status === 1 ? 'status-active' : 'status-inactive';
                const statusText = category.status === 1 ? '启用' : '禁用';
                const createdTime = new Date(category.createdTime).toLocaleString('zh-CN');
                
                tableHTML += `
                    <tr>
                        <td>${category.categoryName}</td>
                        <td>${category.description || '-'}</td>
                        <td>${category.sortOrder}</td>
                        <td class="${statusClass}">${statusText}</td>
                        <td>${createdTime}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn edit" onclick="editCategory(${category.id})">
                                    <i class="layui-icon layui-icon-edit"></i> 编辑
                                </button>
                                <button class="action-btn delete" onclick="deleteCategory(${category.id})">
                                    <i class="layui-icon layui-icon-delete"></i> 删除
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            
            tableHTML += `
                    </tbody>
                </table>
            `;
            
            categoryList.innerHTML = tableHTML;
        }
        
        // 显示添加分类模态框
        function showAddCategoryModal() {
            document.getElementById('modalTitle').textContent = '添加分类';
            document.getElementById('categoryForm').reset();
            document.getElementById('categoryId').value = '';
            document.getElementById('categoryModal').style.display = 'block';
        }
        
        // 编辑分类
        function editCategory(id) {
            const category = categories.find(c => c.id === id);
            if (!category) return;
            
            document.getElementById('modalTitle').textContent = '编辑分类';
            document.getElementById('categoryId').value = category.id;
            document.getElementById('categoryName').value = category.categoryName || '';
            document.getElementById('description').value = category.description || '';
            document.getElementById('sortOrder').value = category.sortOrder || 0;
            document.getElementById('status').value = category.status || 1;
            
            document.getElementById('categoryModal').style.display = 'block';
        }
        
        // 关闭模态框
        function closeCategoryModal() {
            document.getElementById('categoryModal').style.display = 'none';
        }
        
        // 删除分类
        function deleteCategory(id) {
            layui.use(['layer'], function(){
                var layer = layui.layer;
                layer.confirm('确定要删除这个分类吗？删除后相关商品的分类将变为空。', {
                    title: '确认删除',
                    btn: ['确定', '取消']
                }, function(index) {
                    fetch(`/api/categories/${id}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 200) {
                            layer.msg('删除成功', {icon: 1});
                            loadCategories();
                        } else {
                            layer.msg('删除失败: ' + data.message, {icon: 2});
                        }
                    })
                    .catch(error => {
                        console.error('删除分类失败:', error);
                        layer.msg('删除失败，请检查网络连接', {icon: 2});
                    });
                    layer.close(index);
                });
            });
        }
        
        // 表单提交
        document.getElementById('categoryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const categoryId = document.getElementById('categoryId').value;
            const categoryData = {
                categoryName: document.getElementById('categoryName').value,
                description: document.getElementById('description').value,
                sortOrder: parseInt(document.getElementById('sortOrder').value) || 0,
                status: parseInt(document.getElementById('status').value)
            };
            
            const url = categoryId ? `/api/categories/${categoryId}` : '/api/categories';
            const method = categoryId ? 'PUT' : 'POST';
            
            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(categoryData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    layui.use(['layer'], function(){
                        var layer = layui.layer;
                        layer.msg(categoryId ? '更新成功' : '添加成功', {icon: 1});
                    });
                    closeCategoryModal();
                    loadCategories();
                } else {
                    layui.use(['layer'], function(){
                        var layer = layui.layer;
                        layer.msg('操作失败: ' + data.message, {icon: 2});
                    });
                }
            })
            .catch(error => {
                console.error('保存分类失败:', error);
                layui.use(['layer'], function(){
                    var layer = layui.layer;
                    layer.msg('保存失败，请检查网络连接', {icon: 2});
                });
            });
        });
        
        // 导航函数
        function goToHome() {
            window.location.href = 'index.html';
        }
        
        function goToCustomers() {
            window.location.href = 'customers.html';
        }
        
        function goToProducts() {
            window.location.href = 'products.html';
        }
        
        function showCategories() {
            // 当前页面，无需跳转
        }
        
        function goToOrders() {
            window.location.href = 'orders.html';
        }
        
        function goToStockIn() {
            alert('入库管理功能开发中...');
        }
        
        function goToStockOut() {
            alert('出库管理功能开发中...');
        }
        
        function goToReports() {
            alert('统计报表功能开发中...');
        }
        
        function goToSettings() {
            alert('系统设置功能开发中...');
        }
        
        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('categoryModal');
            if (event.target === modal) {
                closeCategoryModal();
            }
        }
    </script>
</body>
</html> 